<template>
  <div style="width: 100%">
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div id="index">
      <!-- 顶部内容 -->
      <div class="top">
        <!-- 二级菜单和轮播图 -->
        <div class="top-body">
          <!-- 左侧二级菜单 -->
          <div class="left-menu" @mouseleave="shiftOut()">
            <!-- 遍历一级分类 -->
            <div :id="index" class="li"
              v-for="(item,index) in menuData"
              :key="item.id"
              @mouseenter="shiftIn(index)"
            >
              <span>{{ item.name }}</span>
              <i class="el-icon-arrow-right" style="color: white"></i>
            </div>
            <!-- 二级分类展示框 -->
            <div v-show="showTip" class="tooltip">
                <div class="secMenu"
                  v-for="item2 in menuData[selected].children"
                  :key="item2.id"
                  @click="toCategory(item2.id)"
                >
                  <img :src="item2.imgPath" alt="" />&nbsp;&nbsp;
                  <span>{{ item2.name }}</span>
                </div>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="carousels">
            <Carousels>这是轮播图</Carousels>
          </div>
        </div>
        <!-- 推荐商品 -->
        <div class="top-foot">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 商品展示 -->
      <div class="body"></div>
    </div>
    <!-- 脚部 -->
    <Footer></Footer>
  </div>
</template>

<script>
//直接从对应api里导入请求方法
import { indexList } from "@/api/shop";

export default {
  data() {
    return {
      //二级分类展示模块
      showTip: false,
      //一级分类下标值
      selected: 0,
      //前一个移入的一级分类下标
      lastIndex: 0,

      //左侧二级分类
      menuData: [
        {
          id: 1,
          name: "手机",
          icon: "",
          children: [
            {
              id: 2,
              name: "Xiaomi MIX系列",
              icon: require("@/assets/二级分类首页图/xiaomimix系列.png"),
              children: "/",
            },
            {
              id: 3,
              name: "Xiaomi 数字系列",
              icon: require("@/assets/二级分类首页图/xiaomi数字系列.png"),
              children: "/",
            },
            {
              id: 4,
              name: "Xiaomi Civi系列",
              icon: require("@/assets/二级分类首页图/xiaomicivi系列.png"),
              children: "/",
            },
          ],
        },
        {
          id: 5,
          name: "电视",
          icon: "",
          children: [],
        },
        {
          id: 9,
          name: "笔记本 平板",
          icon: "",
          children: [],
        },
      ],
    };
  },
  created() {
    //获取二级分类列表
    indexList()
      .then((res) => {
        this.menuData = res.data;
        console.log(this.menuData);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    //鼠标移入一级分类
    shiftIn(index) {
        //把展示数据和控制元素分开操作，showTip只控制元素是否显示，selected只控制展示数据
        this.showTip = true   //显示二级分类区域
        this.selected = index   //选中的一级菜单下标

        //鼠标移入操作的生命周期
        //1.根据lastIndex，把上一个模块的背景色置空
        document.getElementById(this.lastIndex).style.backgroundColor = ''
        //2.根据当前鼠标进入的模块的index，改变当前所在模块的背景色
        document.getElementById(index).style.backgroundColor = '#ff6a00'
        //3.把当前模块的index记录在lastIndex中
        this.lastIndex = index
    },
    //鼠标移出
    shiftOut() {
        this.showTip = false
        document.getElementById(this.lastIndex).style.backgroundColor = ''
    },

    //点击二级分类跳转商品界面
    toCategory(categoryId) {
      this.$router.push({
        path: "/Category",
        query: {
          categoryId: categoryId,
        },
      });
      console.log(categoryId);
    },
  },
};
</script>

<style scoped>
#index {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* 这是头部模块 */
.top {
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* 二级菜单与轮播图区域 */
.top-body {
  position: relative;
  margin-bottom: 20px;
  width: 1200px;
  height: 550px;

  display: flex;
}
/* 二级菜单 */
.left-menu {
  box-sizing: border-box;
  padding: 20px 0;
  background-color: #9e9c9d;
  width: 300px;
  height: 100%;

  display: flex;
  flex-direction: column;
}
.li {
  padding: 0px 20px;
  height: 10%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.li:hover {
  cursor: pointer;
}
.li>span {
    color: white; 
    text-decoration: none; 
    font-size: 15px
}
.tooltip {
  position: absolute;
  z-index: 99;
  top: 0px;
  left: 240px;
  background: #fff;
  height: 100%;
  box-shadow: 0 6px 10px 2px rgba(0, 0, 0, 0.12);

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}
.secMenu {
  padding-left: 20px;
  width: 240px;
  height: 16.6%;

  display: flex;
  align-items: center;
}
.secMenu > img {
  width: 40px;
}
.secMenu > span {
  font-size: 15px;
}
.secMenu:hover {
  cursor: pointer;
}
.secMenu:hover > span {
  color: #ff6a00;
}
/* 轮播图 */
.carousels {
  width: 100%;
}

.top-foot {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-foot div {
  width: 23%;
  height: 160px;
  border: 1px solid black;
}

/* 这是element引用模块 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>